<template>
  <div class="domain-detail" v-loading.fullscreen.lock="fullscreenLoading">
    <index_top></index_top>
    <div class="container">
      <div class="domain-body">
        <div v-show="ArticleStatus==1">
          <div class="index_center_left">
            <div class="article-detail-container">
              <!--文章头部 -->
              <header class="article-detail-header">
                <h2 class="article-detail-title">{{this.article.title}}</h2>
                <div class="artucke-detail-info">
                  <span>
                    <i class="el-icon-time"></i>
                    {{this.article.publishTime}}
                  </span>
                  <span>
                    <i class="el-icon-s-custom"></i>
                    <a
                      :href="'/user?author_id='+this.article.user.id"
                    >{{this.article.user.nickName}}</a>
                  </span>
                  <span>
                    <i class="el-icon-collection-tag">{{this.article.artType}}</i>
                  </span>
                </div>
              </header>
              <!--文章内容 -->
              <section class="article-detail-content" v-html="this.article.content"></section>
              <!-- 操作按钮 -->
              <div class="article-operating">
                <el-button
                  type="primary"
                  icon="el-icon-star-off"
                  @click="articleZan(1)"
                  v-if="this.article.isZan==0"
                >喜欢</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-star-on"
                  @click="articleZan(0)"
                  v-if="this.article.isZan==1"
                >已赞</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-folder-opened"
                  @click="articleColl(1)"
                  v-if="this.article.isColl==0"
                >收藏</el-button>
                <el-button
                  type="primary"
                  icon="el-icon-folder-add"
                  @click="articleColl(0)"
                  v-if="this.article.isColl==1"
                >已收藏</el-button>
                <el-button type="primary" icon="el-icon-s-promotion" v-clipboard:copy="currentUrl" v-clipboard:success="onCopy">转发</el-button>
              </div>
              <!--推荐阅读 -->
              <!-- <div class="article-recommend">
                    推荐阅读
              </div>-->
              <!--评论 -->
              <div class="article-send-commend">
                <p>
                  <i class="el-icon-edit"></i>评论
                </p>
                <el-input
                  type="textarea"
                  placeholder="轻点吐槽"
                  v-model="sendCommentParam.content"
                  maxlength="50"
                  rows="4"
                  show-word-limit
                ></el-input>
                <div class="commend-send-buttom">
                  <el-button type="success" @click="sendComment">发送</el-button>
                </div>
              </div>
              <p class="article-commend-title">
                <i class="el-icon-s-comment"></i>
                {{commentTotal}}条评论
              </p>
              <div
                class="article-commend-list"
                v-infinite-scroll="loadMoreComment"
                infinite-scroll-disabled="busy"
                infinite-scroll-distance="0"
                infinite-scroll-throttle-delay="0"
              >
                <!--评论列表 -->
                <div class="article-commend-item" v-for="(item,index) in commendList">
                  <div class="article-commend-user-avatar">
                    <a :href="'/user?author_id='+item.user.id">
                      <img :src="item.user.avatar" />
                    </a>
                  </div>
                  <div class="article-commend-info">
                    <div class="article-commend-nickName">
                      <a :href="'/user?author_id='+item.user.id">{{item.user.nickName}}</a>
                    </div>
                    <div class="article-commend-desc">
                      <span>{{index+1}}楼</span> &nbsp;
                      <span>{{item.publishTime}}</span>
                    </div>
                  </div>
                  <div style="clear:both;"></div>
                  <div class="article-commend-content">
                    <p v-html="item.content"></p>
                  </div>
                  <div class="article-commend-icon">
                    <span v-if="item.clickStatus==0" @click="like(index,1)">
                      <i class="iconfont pdd-zan1"></i> 赞
                    </span>
                    <span v-if="item.clickStatus==1" @click="like(index,0)">
                      <i class="iconfont pdd-zan"></i> 已赞
                    </span>
                    <span @click="showReply(true,item.id,item.user.id,item.user.nickName,index)">
                      <i class="el-icon-chat-line-round"></i> 回复
                    </span>
                  </div>
                  <div class="reply-list">
                    <div class="reply-item" v-for="reply in item.reply">
                      <p class="replt-content">
                        <span>
                          <a :href="'/user?author_id='+reply.user.id">{{reply.user.nickName}}</a>
                        </span>：
                        <span>
                          <a
                            :href="'/user?author_id='+reply.reply_user.id"
                          >@{{reply.reply_user.nickName}}</a>
                        </span>
                        <span v-html="reply.replyText"></span>
                      </p>
                      <div class="reply-info">
                        <span>{{reply.replyTime}}</span>
                        <span @click="showReply(true,item.id,reply.user.id,reply.user.nickName,index)" class="reply-buttom">
                          <i class="el-icon-chat-line-round"></i> 回复
                        </span>
                      </div>
                    </div>
                  </div>
                  <el-divider></el-divider>
                </div>
                <div class="loading-data" v-if="data_loading">
                  <span class="loading-data-icon">
                    <i class="el-icon-loading"></i>
                  </span>
                  <span class="loading-data-font">加载中...</span>
                </div>
                <div class="no-moredata" v-if="no_moredata">
                  <el-alert title="没有更多了" type="success" effect="dark" :center="true"></el-alert>
                </div>
              </div>
            </div>
          </div>
          <div class="index_center_right"></div>
        </div>
        <div class="article-404-container" v-show="ArticleStatus==2">
          <p>
            <img src="http://00-upload.gayligayqi.com/blog/404.png" />
          </p>
          <p>抱歉，你所请求的页面不存在！</p>
        </div>
        <div class="article-noReview-container" v-show="ArticleStatus==3">
          <p>
            <img src="http://00-upload.gayligayqi.com/blog/404.png" />
          </p>
          <p>抱歉，内容审核中！</p>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
    <reply
      :replyDialogVisible="showReply_dialog"
      :commendData="replyParam"
      @showReply="showReply(false)"
      @reply_Success="reply_Success"
    ></reply>
    <input type="hidden" v-model="currentUrl" id="url">
  </div>
</template>

<script>
import Vue from "vue";
import index_top from "../index/index_top";
import { fetch, post } from "../../utils/httpRequest";
import reply from "../commend/reply";
export default {
  components: {
    index_top,
    reply
  },
  data() {
    return {
      currentUrl:window.location.href,
      fullscreenLoading: true,
      ArticleStatus: 0,
      data_loading: false,
      no_moredata: false,
      commentTotal: 0,
      busy: false,
      showReply_dialog: false,
      queryDetailParam: {
        contentId: 0
      },
      sendCommentParam: {
        content: ""
      },
      getCommentParam: {
        pageIndex: 0,
        pageSize: 10
      },
      article: {
        user: {}
      },
      commendList: [],
      replyParam: {
        placeholder: "",
        reply_author_id_s: 0,
        commentId: 0,
        articleId: 0,
        index: 0
      }
    };
  },
  created: function() {
    if (this.$route.query.contentId) {
      this.queryDetailParam.contentId = this.$route.query.contentId;
    }
    this.loadArticle();
  },
  methods: {
    loadArticle() {
      fetch(this.http.article_tourist.article.getArticleById, this.queryDetailParam).then(
        response => {
          if (response.success) {
            this.article = response.data;
            this.ArticleStatus = 1;
          } else {
            //内容不存在
            if (response.code === "D0002") {
              this.ArticleStatus = 2;
              // setTimeout(() => {
              //   this.$router.push('/')
              // }, 3000);
              //内容审核中
            } else if (response.code === "D0001") {
              this.ArticleStatus = 3;
              //其他异常信息
            }
          }
          this.fullscreenLoading = false;
        }
      );
    },
    like(index, status) {
      this.commendList[index].clickStatus = status;
      post(this.http.blog_article.comment.clickZan, {
        commentId: this.commendList[index].id,
        clickStatus: status
      }).then(response => {
        if (response.success) {
          this.$notify.success({
            title: "通知",
            message: response.message
          });
        }
      });
    },
    showReply(result, commentId, author_id, nickName, index) {
      if (result) {
        this.replyParam.placeholder = "回复@" + nickName;
        this.replyParam.reply_author_id_s = author_id;
        this.replyParam.commentId = commentId;
        this.replyParam.articleId = this.queryDetailParam.contentId;
        this.replyParam.index = index;
      }
      this.showReply_dialog = result;
    },
    sendComment() {
      post(
        this.http.blog_article.comment.addComment,
        Object.assign({}, this.sendCommentParam, this.queryDetailParam)
      ).then(response => {
        if (response.success) {
          this.sendCommentParam.content = "";
          const result = response.data;
          this.commendList.push(response.data);
          this.$notify.success({
            title: "通知",
            message: response.message
          });
        }
      });
    },
    loadMoreComment() {
      if (!this.busy) {
        this.busy = true;
        this.data_loading = true;
        this.getCommentParam.pageIndex += 1;
        this.getCommentList();
      }
    },
    getCommentList() {
      fetch(
        this.http.article_tourist.comment.getCommentByArticleId,
        Object.assign({}, this.getCommentParam, this.queryDetailParam)
      ).then(response => {
        this.commentTotal = response.data.total;
        if (response.data.records.length > 0) {
          this.commendList = this.commendList.concat(response.data.records);
          this.busy = false;
        } else {
          this.no_moredata = true;
        }
        this.data_loading = false;
      });
    },
    reply_Success(reply) {
      var temp_reply = [];
      temp_reply.push(reply.reply);
      this.commendList[reply.index].reply = temp_reply.concat(
        this.commendList[reply.index].reply
      );
    },
    articleZan(status) {
      post(this.http.blog_article.article.addArticleZan, {
        contentId: this.queryDetailParam.contentId,
        clickStatus: status
      }).then(response => {
        if (response.success) {
           this.article.isZan = status;
           this.$notify.success({
              title: "通知",
              message: response.message
           });
        }
      });
    },
    articleColl(status) {
      post(this.http.blog_article.article.addCollection, {
        contentId: this.queryDetailParam.contentId,
        collStatus: status
      }).then(response => {
        if (response.success) {
          this.article.isColl = status;
          this.$notify.success({
              title: "通知",
              message: response.message
           });
        }
      });
    },
    onCopy: function (e) {
      this.$notify.success({
        title: "通知",
        message: "复制链接成功"
      });
    }
  }
};
</script>

<style scoped>
.reply-buttom{
  cursor: pointer;
}
.article-404-container,
.article-noReview-container {
  text-align: center;
  margin-top: 30px;
}
.loading-data {
  text-align: center;
}
.reply-item {
  margin: 3px 0px;
  line-height: 20px;
}
.reply-list {
  margin-left: 20px;
  border-left: 2px solid #ccc;
  padding-left: 10px;
}
.reply-info {
  color: #ccc;
  font-size: 12px;
}
.replt-content {
  font-size: 12px;
}
.article-commend-title {
  margin: 5px;
  color: #ccc;
  border-left: 3px solid salmon;
  padding-left: 10px;
}
.el-divider {
  margin: 15px auto;
  width: 90%;
}
.article-commend-icon span {
  cursor: pointer;
  padding-right: 15px;
}
.article-commend-icon {
  color: #ccc;
  font-size: 12px;
  margin: 5px 15px 0px;
}
.pdd-zan {
  font-size: 15px;
  color: red;
}
.pdd-zan1 {
  font-size: 15px;
}
.article-commend-content {
  margin: 5px 15px 0px;
  font-size: 12px;
}
.article-commend-info {
  line-height: 20px;
}
.article-commend-nickName a {
  color: #333;
}
.article-commend-desc {
  font-size: 12px;
  color: #ccc;
}
.article-commend-user-avatar,
.article-commend-info {
  float: left;
  margin-left: 10px;
}
.article-commend-user-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.commend-send-buttom {
  text-align: right;
  margin-top: 5px;
}
.article-send-commend {
  margin: 0px 5px;
}
.article-operating {
  text-align: center;
  margin-bottom: 10px;
}
.article-detail-content {
  max-width: 100%;
  margin: 10px 10px;
  overflow: hidden;
}
.article-detail-content >>> img {
  max-width: 100%;
  display: block;
  margin: 0px auto;
}
.article-detail-content >>> pre {
  background-color: #23241f;
  color: #f8f8f2;
  overflow-x: scroll;
  margin-top: 5px;
  padding: 5px 10px;
  line-height: 20px;
}
.article-detail-content >>> p {
  line-height: 30px;
  font-size: 12px;
}
.article-detail-container {
  background-color: white;
  border-radius: 10px;
}
.article-detail-title {
  margin-top: 0;
  border-left: 5px solid #5db8f8;
  margin-left: -1px;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 45px;
  line-height: 35px;
  font-weight: 600;
  -webkit-box-reflect: below -37px -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      color-stop(10%, transparent),
      to(hsla(0, 0%, 100%, 0.3))
    );
}
.artucke-detail-info {
  text-align: center;
  margin-top: 10px;
}
.artucke-detail-info > span {
  font-size: 12px;
  color: #ccc;
  padding: 0px 15px;
}
.artucke-detail-info > span:nth-child(2) a {
  color: #ccc;
}
.article-detail-title {
  text-align: center;
}
.domain-detail {
  background: rgb(241, 241, 241);
}
.domain-body {
  margin-top: 10px;
}
@media screen and (max-width: 1200px) {
  .index_center_right {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .index_center_left {
    width: 800px;
    float: left;
  }
  .index_center_right {
    float: left;
    margin-left: 15px;
    width: 385px;
  }
  .article-detail-content >>> pre::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .article-404-container img,
  .article-noReview-container img {
    width: 100%;
  }
}
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1200px;
    margin: 0px auto;
  }
}
</style>
